<div
  v-kb-modal="mediaDialog"
  class="modal fade media-dialog"
  data-backdrop="static"
  data-keyboard="false"
  style="z-index:200002;padding-top: 60px; "
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header clearfix">
        <button @click="onHideMediaDialog" class="close"
          ><i class="fa fa-close"></i
        ></button>
        <div class="btn-group pull-right">
          <a
            :class="{ active:curType == 'list' }"
            @click="changeType('list')"
            href="javascript:;"
            class="btn btn-default"
            title="List view"
          >
            <i class="fa fa-list fa-x2"></i>
          </a>
          <a
            :class="{ active:curType == 'grid' }"
            @click="changeType('grid')"
            href="javascript:;"
            class="btn btn-default"
            title="Grid view"
          >
            <i class="fa fa-th"></i>
          </a>
        </div>
        <h4 class="modal-title pull-left">{{
          Kooboo.text.common.mediaLibrary
        }}</h4>
        <ol class="breadcrumb pull-left">
          <template v-for="($data,$index) in crumbPath">
            <li v-if="$index !== crumbPath.length - 1" :key="$index">
              <a
                @click="onChoosingFolder($data.fullPath)"
                href="javascript:;"
                >{{ $data.name }}</a
              >
            </li>
            <li v-else class="active" :key="$index">{{ $data.name }}</li>
          </template>
        </ol>
      </div>
      <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
        <div
          v-show="loading"
          style="position: absolute;background: rgba(255, 255, 255, 0.8);top:0;left:0;width: 100%;height: 100%;z-index: 1;"
        >
          <div
            style="
                    font-size: 36px;
                    font-weight: 300;
                    height: 40px;
                    margin-top: -20px;
                    position: absolute;
                    text-align: center;
                    top: 50%;
                    width: 100%;"
          >
            <i class="fa fa-spinner fa-spin"></i>
            {{ Kooboo.text.common.loading }}
          </div>
        </div>

        <table class="table table-striped table-hover" v-if="curType == 'list'">
          <thead>
            <tr>
              <th class="table-checkbox"></th>
              <th></th>
              <th>{{ Kooboo.text.common.URL }}</th>
              <th>{{ Kooboo.text.common.usedBy }}</th>
              <th>{{ Kooboo.text.common.size }}</th>
              <th>{{ Kooboo.text.common.lastModified }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="$data in folders" :key="$data.fullPath">
              <td></td>
              <td class="table-thumbnail"></td>
              <td>
                <a
                  @click="onChoosingFolder($data.fullPath)"
                  href="javascript:;"
                >
                  <i class="table-icon fa fa-folder-open"></i>
                  {{ $data.name }}
                </a>
              </td>
              <td>-</td>
              <td>{{ $data.size || "-" }}</td>
              <td>{{ localDate($data.lastModified) }}</td>
            </tr>
            <tr
              v-for="$data in files"
              :key="$data.id"
              @click="onChoosingFile($data)"
            >
              <td>
                <input
                  v-model="$data.selected"
                  type="checkbox"
                  style="pointer-events: none"
                />
              </td>
              <td class="table-thumbnail">
                <div class="thumbnail-fixed">
                  <div class="img-wrap"></div>
                  <img alt="" :src="$data.thumbnail" />
                </div>
              </td>
              <td>
                <i class="table-icon fa fa-file-image-o"></i>
                {{ $data.url }}
              </td>
              <td>
                <template v-if="$data.references.length > 0">
                  <a
                    v-for="refer in Object.keys($data.references)"
                    href="javascript:;"
                    class="label label-sm blue"
                    >{{ $data.references[refer] + " " + refer }}</a
                  >
                </template>
                <template v-else>
                  -
                </template>
              </td>
              <td>{{ Kooboo.bytesToSize($data.size) || "-" }}</td>
              <td>{{ localDate($data.lastModified) }}</td>
            </tr>
            <tr v-if="folders.length + files.length == 0">
              <td colspan="100" class="text-center">{{
                Kooboo.text.common.empty
              }}</td>
            </tr>
          </tbody>
        </table>
        <div class="grid grid-sm" v-if="curType == 'grid'">
          <div class="grid-group folders">
            <div
              v-for="$data in folders"
              :key="$data.fullPath"
              @click="onChoosingFolder($data.fullPath)"
              class="grid-item grid-folder"
            >
              <a href="javascript:;">
                <span class="info">
                  <span class="count">{{ $data.count }}</span>
                  <span class="name">{{ $data.name }}</span>
                </span>
              </a>
            </div>
          </div>
          <div v-if="folders.length + files.length == 0" class="text-center">{{
            Kooboo.text.common.empty
          }}</div>
          <div class="grid-group files">
            <div
              v-for="$data in files"
              :key="$data.id"
              @click="onChoosingFile($data)"
              :class="{ 'grid-img': $data.isImage, active: $data.selected }"
              class="grid-item"
            >
              <a href="javascript:;">
                <span class="img-wrap"></span>
                <img alt="" :src="$data.thumbnail" />
                <span class="info">
                  <span class="name">
                    <i class="fa fa-file-image-o"></i>
                    {{ $data.name }}
                  </span>
                </span>
              </a>
              <input
                v-model="$data.selected"
                type="checkbox"
                name="fileRadio"
                style="pointer-events: none"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a class="btn blue btn-file pull-left btn-file">
          <span>{{ Kooboo.text.common.uploadImages }}</span>
          <input type="file" v-kb-upload="uploadSetting" />
        </a>
        <button
          @click="save"
          :disabled="selectedFiles.length == 0"
          class="btn green"
          >{{ Kooboo.text.common.choose }}</button
        >
        <button @click="onHideMediaDialog" class="btn gray">{{
          Kooboo.text.common.cancel
        }}</button>
      </div>
    </div>
  </div>
</div>
